<template>
    <div class="nav-container">
        <div class="logo" @click="handleLogoClick">
            <span class="logo-img"></span>
            <span class="logo-title"></span>
        </div>
        <ul id="nav">
            <!-- slide1是实体的，点击效果 -->
            <li class="slide1"></li>
            <!-- slide2是模糊的，悬停效果 -->
            <li class="slide2"></li>
            <li v-for="item in navItems" :key="item">
                <a href="#" @click="handleClick(item)" @mouseover="handleMouseover(item)">
                    {{ item }}
                </a>
            </li>
        </ul>
        <div class="line"></div>
        <div class="login">
            <button @click="handleLogin">SIGN IN</button>
        </div>
    </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus';
export default {
    data() {
        return {
            navItems: ['HOME', 'NEWS', 'PRODUCTS', 'CASES', 'TEAM'],
            slide1width: 0,
            slide2Width: 0,
            slide1Position: { left: 0 },
            slide2Position: { left: 0 },
        };
    },
    mounted() {

    },
    methods: {
        handleLogin() {
            this.$router.push('/login');
        },
        handleLogoClick() {
            // this.$message.error('该功能还没有开发喔~');
            // ElMessage.error('该功能还没有开发哟~');
            // ElMessageBox.alert('这是一个点击Logo返回Home的事件', '功能未实现', {
            //     confirmButtonText: '确定',
            //     callback: action => {
            //         this.$message.info(`action: ${action}`);
            //     }
            // });
            this.setCurrentItem(0);
            this.$emit('navClicked', 0);
        },
        handleClick(item) {
            // 处理点击事件，更新当前选中的项目
            let index = this.navItems.indexOf(item);
            this.setCurrentItem(index);
            this.$emit('navClicked', index);
        },
        handleMouseover(item) {
            // 处理鼠标悬停事件，更新当前高亮的项目
            this.updateHighlight(this.navItems.indexOf(item));
        },
        setCurrentItem(index) {
            const item = this.$el.querySelector(`#nav li:nth-child(${index + 3}) a`);
            this.slide1Width = item.offsetWidth;
            this.slide1Position.left = item.offsetLeft;
            this.updateHighlightStyle();
        },
        updateHighlight(index) {
            const item = this.$el.querySelector(`#nav li:nth-child(${index + 3})`);
            // const position = item.getBoundingClientRect();
            // this.slide2Width = position.width;
            // this.slide2Position.left = position.left
            this.slide2Width = item.offsetWidth;
            this.slide2Position.left = item.offsetLeft;
            this.updateHighlightStyle();
        },
        updateHighlightStyle() {
            // 更新样式，也就是移动滑块到设置好的位置
            const slide1 = this.$el.querySelector('#nav .slide1');
            const slide2 = this.$el.querySelector('#nav .slide2');
            if (slide1 && slide2) {
                slide1.style.width = `${this.slide1Width}px`;
                slide1.style.left = `${this.slide1Position.left}px`;
                slide2.style.width = `${this.slide2Width}px`;
                slide2.style.left = `${this.slide2Position.left}px`;
                slide2.style.opacity = 1;
                // console.log('slide1 width/left:', slide1.style.width, slide1.style.left);
                // console.log('slide2 width/left:', slide2.style.width, slide2.style.left);
            }
        }
    }
};
</script>

<style scoped>
.nav-container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    background: rgba(0, 0, 0, 0.1);
}

.logo {
    width: 20vw;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 10px;
    padding-left: 2vw;
    cursor: pointer;
    z-index: 2;
}

.logo-img {
    width: 40%;
    height: 100%;
    background-image: url('@/assets/img/home/logo_img.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.logo-title {
    width: 50vw;
    height: 9vh;
    background-image: url('@/assets/img/home/logo_title.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.login {
    margin-top: 2vh;
    height: 8vh;
    width: 12vw;
}

@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon');

.login button {
    width: 100%;
    height: 90%;
    border-radius: 15vw;
    font-family: 'Do Hyeon';
    font-size: 3em;
    font-weight: bolder;
    cursor: pointer;
    transition: 0.5s ease;
    color: white;
    background: none;
    border-color: rgb(213, 230, 249);

    &:hover {
        transform: scale(1.1);
    }
}

#nav {
    height: 100%;
    position: relative;
    display: flex;
    border: none;
    list-style: none;
    /* background: #f5f5f5; */
    background: none;
    /* box-shadow: 20px 40px 40px #00000033; */
    margin: 0;
    /*这一句要加,不然默认上下有margin */
    padding: 10px;
}

#nav li {
    margin: 0;
    padding: 0;
    text-align: center;
    justify-content: center;
}

#nav li a {
    position: relative;
    padding: 15px 50px;
    font: bolder 24px 'Helvetica Neue';
    border: none;
    outline: none;
    color: #fff;
    display: inline-block;
    text-decoration: none;
    z-index: 3;
}

.line {
    margin: auto 2vw;
    height: 70%;
    width: 1vw;
    position: relative;
    overflow: hidden;
}

.line::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0.2vw;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0));
    background-size: 0.2vw 100%;
    background-repeat: no-repeat;
    margin-right: -0.5vw;
}


.slide1,
.slide2 {
    position: absolute;
    display: inline-block;
    height: 60px;
    border-radius: 10em;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1.05);
}

.slide1 {
    background-color: rgba(194, 218, 247, 0.7);
    z-index: 2;
    box-shadow: 0px 0px 30px 0px rgba(255, 255, 255) inset;
}

.slide2 {
    opacity: 0;
    background-color: rgba(194, 218, 247, 0.3);
    z-index: 1;
    box-shadow: 0 0 40px #ffffffaa inset;
}
</style>